<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" @submit.native.prevent>
      <el-form-item label="敏感词">
        <el-input size="small" v-model="listQuery.q_keyword" minlength="2" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="this.getList">查询</el-button>
        <el-button icon="el-icon-refresh-left" size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="button-table-margin">
      <el-button size="small" type="primary" @click="append" v-permission="['admin/searchkeyword/add']">添加</el-button>
      <el-button size="small" type="primary" @click="edit" v-permission="['admin/searchkeyword/edit']">修改</el-button>
      <el-button size="small" type="primary" @click="deleteout" v-permission="['admin/searchkeyword/del']">删除</el-button>
    </div>
    <el-table
      ref="singleTable"
      :data="dataList"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%">
      <el-table-column
        type="index"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        property="keyword"
        label="敏感词">
      </el-table-column>
      <el-table-column
        property="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        property="createName"
        label="添加人">
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="judgmentTitle" :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="commissionForm" :rules="rules" ref="commissionForm">
        <section class="text-annotation">
          开启敏感词库后，搜索敏感词不会搜索到任何信息。
        </section>
        <el-form-item label="敏感词" prop="keyword" :label-width="formLabelWidth">
          <el-input v-model="commissionForm.keyword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('commissionForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getKeywordListSearch, addKeywordSearch, editKeywordSearch, updateItemKeywordSearch, deleteKeywordSearch } from '@/api/search';
import { Message } from "element-ui";
export default {
  name: 'sensitive',
  components: { Pagination },
  data() {
    return {
      dataList: [],
      total: 0,
      listLoading: false,
      listQuery: {
        q_keyword: '',
        page: 1,
        limit: 20
      },
      currentRow: null,
      judgmentTitle: '添加敏感词',
      judgmentType: '1',
      dialogFormVisible: false,
      formLabelWidth: '80px',
      commissionForm: {
        keyword: ''
      },
      rules: {
        keyword: [
          { required: true, message: '请输入敏感词', trigger: 'blur' },
          { min: 2, max: 20, message: '敏感词长度为2-20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getKeywordListSearch(this.listQuery).then(res => {
        this.dataList = res.data.rows
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleCurrentChange(val) {
      // 选中当前行数据
      this.currentRow = val
    },
    append() {
      // 添加
      this.judgmentTitle = '添加敏感词'
      this.judgmentType = '1'
      this.commissionForm.keyword = ''
      this.dialogFormVisible = true;
    },
    edit() {
      // 编辑
      if (!this.currentRow) {
        Message.error("请选择操作行");
        return;
      }
      this.$nextTick(()=>{
        this.$refs['commissionForm'].clearValidate();
      })
      this.judgmentTitle = '修改敏感词'
      this.judgmentType = '2'
      this.dialogFormVisible = true;
      editKeywordSearch({id: this.currentRow.id}).then(res => this.commissionForm.keyword = res.data.data.searchKeyword.keyword)
    },
    deleteout() {
      if (!this.currentRow) {
        Message.error("请选择操作行");
        return;
      }
      this.$confirm("确定要删除吗？", "提示", {
        onfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteKeywordSearch({id: this.currentRow.id}).then(res => {
          if(res.data.success) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getList()
          } else {
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.judgmentType == '1') {
            addKeywordSearch(this.commissionForm).then(res => {
              if(!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success('操作成功')
              this.dialogFormVisible = false;
              this.getList()
            })
          } else {
            this.commissionForm.id = this.currentRow.id
            updateItemKeywordSearch(this.commissionForm).then(res => {
              if(!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success('操作成功')
              this.dialogFormVisible = false;
              this.getList()
            })
          }
        }
      });
    },
    reset() {
      this.listQuery.q_keyword = ''
      this.getList()
    }
  }
}
</script>
<style scope>
.text-annotation {
  border-style: solid;
  border-width: 1px 1px 1px 5px;
  background: 0 0;
  border-color: #e6e6e6;
  margin-bottom: 30px;
  padding: 15px;
  line-height: 22px;
  border-radius: 0 2px 2px 0;
  color: #666;
  font-size: 14px;
}
</style>
